<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火电机组冷端优化系统 - 报表平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-bg: #0f172a;
            --secondary-bg: #1e293b;
            --card-bg: #1a2435;
            --accent: #5eead4;
            --accent-hover: #88f3e2;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --text-tertiary: #64748b;
            --border-color: #334155;
            --success: #4ade80;
            --warning: #fbbf24;
            --error: #f87171;
            --power-color: #f97316;
            --load-color: #38bdf8;
            --pressure-color: #8b5cf6;
            --temp-color: #f43f5e;
            --font-main: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: var(--primary-bg);
            color: var(--text-primary);
            font-family: var(--font-main);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        /* 导航栏容器 */
        .navbar {
            background: var(--secondary-bg);
            border-bottom: 1px solid var(--border-color);
            padding: 0 var(--spacing-lg);
            height: 60px;
            display: flex;
            align-items: center;
            z-index: 100;
        }
        
        /* Logo区域 */
        .logo-area {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding-right: var(--spacing-lg);
            border-right: 1px solid var(--border-color);
        }
        
        .logo-icon {
            width: 36px;
            height: 36px;
            background: var(--accent);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-bg);
            font-size: 1rem;
        }
        
        .logo-text {
            font-size: 1.2rem;
            font-weight: 600;
            background: linear-gradient(to right, var(--text-primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        /* 导航区域 */
        .nav-area {
            flex: 1;
            padding: 0 var(--spacing-xl);
            display: flex;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-xl);
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--accent);
            background: rgba(94, 234, 212, 0.1);
        }
        
        .nav-link i {
            font-size: 0.9rem;
        }
        
        /* 下拉菜单 */
        .submenu {
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--secondary-bg);
            border-radius: var(--radius-sm);
            min-width: 180px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            z-index: 200;
            display: none;
            padding: var(--spacing-sm) 0;
        }
        
        .nav-item:hover .submenu {
            display: block;
        }
        
        .submenu-item {
            padding: var(--spacing-sm) var(--spacing-md);
        }
        
        .submenu-link {
            color: var(--text-secondary);
            text-decoration: none;
            display: block;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
        }
        
        .submenu-link:hover {
            color: var(--accent);
            background: rgba(94, 234, 212, 0.1);
        }
        
        /* 用户区域 */
        .user-area {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            position: relative;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--accent), #4a7bff);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.9rem;
        }
        
        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--secondary-bg);
            min-width: 200px;
            border-radius: var(--radius-sm);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            padding: var(--spacing-md);
            z-index: 200;
            display: none;
        }
        
        .user-dropdown.active {
            display: block;
        }
        
        .user-info {
            padding: var(--spacing-sm) 0 var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: var(--spacing-sm);
        }
        
        .user-name {
            font-weight: 600;
            margin-bottom: var(--spacing-xs);
        }
        
        .user-role {
            color: var(--text-secondary);
            font-size: 0.85rem;
        }
        
        .dropdown-item {
            padding: var(--spacing-sm) 0;
        }
        
        .dropdown-link {
            color: var(--text-primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-sm) var(--spacing-sm);
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
        }
        
        .dropdown-link:hover {
            background: rgba(94, 234, 212, 0.1);
            color: var(--accent);
        }
        
        /* 内容区域 */
        .content-area {
            flex: 1;
            padding: var(--spacing-xl);
            overflow: auto;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231a2435"/><path d="M20,20 L80,20 L80,80 L20,80 Z" stroke="%23334155" fill="none" stroke-width="0.5"/></svg>');
            background-size: 20px 20px;
        }
        
        /* 报表平台样式 */
        .report-container {
            max-width: 1600px;
            margin: 0 auto;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-xl);
        }
        
        .report-title {
            font-size: 1.8rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }
        
        .time-display {
            font-size: 1.1rem;
            color: var(--text-secondary);
            background: rgba(26, 36, 53, 0.5);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
        }
        
        /* 配置和预览区域 */
        .report-content {
            display: flex;
            flex: 1;
            gap: var(--spacing-xl);
            height: calc(100% - 100px);
        }
        
        .config-panel {
            width: 320px;
            background: var(--secondary-bg);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            border: 1px solid var(--border-color);
            overflow-y: auto;
        }
        
        .preview-panel {
            flex: 1;
            background: var(--secondary-bg);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            border: 1px solid var(--border-color);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        /* 选项卡 */
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: var(--spacing-lg);
        }
        
        .tab {
            padding: var(--spacing-sm) var(--spacing-md);
            cursor: pointer;
            position: relative;
        }
        
        .tab.active {
            color: var(--accent);
        }
        
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--accent);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: var(--spacing-lg);
        }
        
        .form-label {
            display: block;
            margin-bottom: var(--spacing-sm);
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .form-select, .form-input {
            width: 100%;
            padding: var(--spacing-sm) var(--spacing-md);
            background: rgba(26, 36, 53, 0.7);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            font-family: var(--font-main);
        }
        
        .form-select:focus, .form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.1);
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-md);
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            width: calc(50% - var(--spacing-md));
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            font-family: var(--font-main);
            text-align: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: rgba(94, 234, 212, 0.2);
            color: var(--text-primary);
            border: 1px solid rgba(94, 234, 212, 0.4);
        }
        
        .btn-primary:hover {
            background: rgba(94, 234, 212, 0.3);
        }
        
        .btn-secondary {
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            background: rgba(148, 163, 184, 0.25);
        }
        
        /* 预览区域 */
        .preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-lg);
        }
        
        .preview-title {
            font-size: 1.4rem;
            color: var(--text-primary);
        }
        
        .export-actions {
            display: flex;
            gap: var(--spacing-sm);
        }
        
        .export-btn {
            padding: var(--spacing-sm) var(--spacing-md);
            background: rgba(94, 234, 212, 0.1);
            border: 1px solid rgba(94, 234, 212, 0.3);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .export-btn:hover {
            background: rgba(94, 234, 212, 0.2);
        }
        
        .preview-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
            overflow: hidden;
        }
        
        .chart-container {
            height: 300px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            position: relative;
        }
        
        .data-table-container {
            height: 300px;
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            overflow: auto;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th {
            text-align: left;
            padding: var(--spacing-sm) var(--spacing-md);
            background: rgba(26, 36, 53, 0.5);
            color: var(--text-secondary);
            font-weight: 500;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
        }
        
        .data-table td {
            padding: var(--spacing-sm) var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
        }
        
        .data-table tr:last-child td {
            border-bottom: none;
        }
        
        .data-table tr:hover {
            background: rgba(94, 234, 212, 0.05);
        }
        
        /* 模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 300;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .modal.active {
            visibility: visible;
            opacity: 1;
        }
        
        .modal-content {
            background: var(--card-bg);
            border-radius: var(--radius-md);
            width: 100%;
            max-width: 500px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        
        .modal.active .modal-content {
            transform: translateY(0);
        }
        
        .modal-header {
            padding: var(--spacing-lg);
            background: rgba(26, 36, 53, 0.7);
            border-bottom: 1px solid var(--border-color);
        }
        
        .modal-title {
            font-size: 1.4rem;
            color: var(--accent);
        }
        
        .modal-body {
            padding: var(--spacing-xl);
        }
        
        .modal-footer {
            padding: var(--spacing-lg);
            background: rgba(26, 36, 53, 0.7);
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: var(--spacing-md);
        }
        
        /* 响应式调整 */
        @media (max-width: 1200px) {
            .report-content {
                flex-direction: column;
            }
            
            .config-panel {
                width: 100%;
                height: auto;
            }
        }
        
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                height: auto;
                padding: var(--spacing-md);
            }
            
            .logo-area {
                padding-right: 0;
                border-right: none;
                margin-bottom: var(--spacing-md);
            }
            
            .nav-area {
                padding: 0;
                margin-bottom: var(--spacing-md);
            }
            
            .nav-menu {
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--spacing-md);
            }
            
            .report-header {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-md);
            }
            
            .export-actions {
                align-self: flex-end;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <!-- Logo区域 -->
        <div class="logo-area">
            <div class="logo-icon">
                <i class="fas fa-bolt"></i>
            </div>
            <div class="logo-text">冷端优化系统</div>
        </div>
        
        <!-- 功能导航区 -->
        <div class="nav-area">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="fas fa-tachometer-alt"></i> 驾驶舱
                    </a>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="fas fa-cogs"></i> 核心功能
                        <i class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="submenu">
                        <li class="submenu-item">
                            <a href="#" class="submenu-link">
                                <i class="fas fa-tachometer-alt"></i> 背压分析
                            </a>
                        </li>
                        <li class="submenu-item">
                            <a href="#" class="submenu-link">
                                <i class="fas fa-broom"></i> 清洁分析
                            </a>
                        </li>
                        <li class="submenu-item">
                            <a href="#" class="submenu-link">
                                <i class="fas fa-snowflake"></i> 冬季防冻
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="fas fa-brain"></i> AI智能分析
                        <i class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="submenu">
                        <li class="submenu-item">
                            <a href="#" class="submenu-link">
                                <i class="fas fa-comments"></i> 对话式分析
                            </a>
                        </li>
                        <li class="submenu-item">
                            <a href="#" class="submenu-link">
                                <i class="fas fa-search"></i> 检索式分析
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link active">
                        <i class="fas fa-chart-bar"></i> 报表
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 用户区域 -->
        <div class="user-area">
            <div class="user-avatar" id="userAvatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="user-dropdown" id="userDropdown">
                <div class="user-info">
                    <div class="user-name">管理员</div>
                    <div class="user-role">系统管理员</div>
                </div>
                
                <div class="dropdown-item">
                    <a href="#" class="dropdown-link" id="openChangePassword">
                        <i class="fas fa-key"></i> 修改密码
                    </a>
                </div>
                
                <div class="dropdown-item">
                    <a href="#" class="dropdown-link">
                        <i class="fas fa-user-circle"></i> 个人中心
                    </a>
                </div>
                
                <div class="dropdown-item">
                    <a href="#" class="dropdown-link">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 内容区域 - 报表平台 -->
    <div class="content-area">
        <div class="report-container">
            <div class="report-header">
                <h1 class="report-title">
                    <i class="fas fa-chart-line"></i> 冷端优化报表平台
                </h1>
                <div class="time-display">
                    <i class="fas fa-clock"></i> 
                    <span id="currentTime">2023年10月15日 14:28:36</span>
                </div>
            </div>
            
            <div class="report-content">
                <!-- 左侧配置面板 -->
                <div class="config-panel">
                    <div class="tabs">
                        <div class="tab active" data-tab="query">查询条件</div>
                        <div class="tab" data-tab="metrics">指标选择</div>
                        <div class="tab" data-tab="layout">布局设置</div>
                        <div class="tab" data-tab="style">样式主题</div>
                        <div class="tab" data-tab="export">导出设置</div>
                    </div>
                    
                    <!-- 查询条件配置 -->
                    <div class="tab-content active" id="query-tab">
                        <div class="form-group">
                            <label class="form-label">时间范围</label>
                            <div class="date-range">
                                <input type="date" class="form-input" value="2023-10-01">
                                <input type="date" class="form-input" value="2023-10-15">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">时间粒度</label>
                            <select class="form-select">
                                <option>小时</option>
                                <option selected>天</option>
                                <option>周</option>
                                <option>月</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">选择电厂</label>
                            <select class="form-select" multiple>
                                <option selected>华北电厂</option>
                                <option selected>华东电厂</option>
                                <option>华南电厂</option>
                                <option>西北电厂</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">选择机组</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="checkbox" checked> #1机组
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox" checked> #2机组
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> #3机组
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> #4机组
                                </label>
                            </div>
                        </div>
                        
                        <div class="btn-group">
                            <button class="btn btn-primary">
                                <i class="fas fa-sync-alt"></i> 应用筛选
                            </button>
                            <button class="btn btn-secondary">
                                <i class="fas fa-times"></i> 重置
                            </button>
                        </div>
                    </div>
                    
                    <!-- 指标选择配置 -->
                    <div class="tab-content" id="metrics-tab">
                        <div class="form-group">
                            <label class="form-label">主要指标</label>
                            <select class="form-select">
                                <option>发电功率</option>
                                <option selected>平均背压</option>
                                <option>风机功耗</option>
                                <option>冷却水温度</option>
                                <option>端差</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">对比指标</label>
                            <select class="form-select">
                                <option>无</option>
                                <option>去年同期</option>
                                <option>上月数据</option>
                                <option>基准值</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">计算指标</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="checkbox" checked> 平均值
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> 最大值
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox" checked> 最小值
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> 标准差
                                </label>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">指标分组</label>
                            <select class="form-select">
                                <option selected>按电厂分组</option>
                                <option>按机组分组</option>
                                <option>按日期分组</option>
                                <option>不分组</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- 布局设置配置 -->
                    <div class="tab-content" id="layout-tab">
                        <div class="form-group">
                            <label class="form-label">图表类型</label>
                            <select class="form-select">
                                <option selected>折线图</option>
                                <option>柱状图</option>
                                <option>饼图</option>
                                <option>面积图</option>
                                <option>散点图</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">图表布局</label>
                            <div class="drag-container">
                                <div class="drag-item" draggable="true">
                                    <i class="fas fa-chart-line"></i> 单图表
                                </div>
                                <div class="drag-item" draggable="true">
                                    <i class="fas fa-chart-bar"></i> 双图表对比
                                </div>
                                <div class="drag-item" draggable="true">
                                    <i class="fas fa-chart-pie"></i> 多图表网格
                                </div>
                                <div class="drag-item" draggable="true">
                                    <i class="fas fa-chart-area"></i> 图表+表格
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">图表尺寸</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="radio" name="size" checked> 标准
                                </label>
                                <label class="checkbox-item">
                                    <input type="radio" name="size"> 大尺寸
                                </label>
                                <label class="checkbox-item">
                                    <input type="radio" name="size"> 自适应
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 样式主题配置 -->
                    <div class="tab-content" id="style-tab">
                        <div class="form-group">
                            <label class="form-label">主题颜色</label>
                            <select class="form-select">
                                <option selected>科技蓝</option>
                                <option>深色主题</option>
                                <option>浅色主题</option>
                                <option>高对比度</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">图表配色</label>
                            <select class="form-select">
                                <option selected>冷端优化主题</option>
                                <option>电厂标准配色</option>
                                <option>自定义配色</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">数据点样式</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="radio" name="point" checked> 圆形
                                </label>
                                <label class="checkbox-item">
                                    <input type="radio" name="point"> 方形
                                </label>
                                <label class="checkbox-item">
                                    <input type="radio" name="point"> 三角形
                                </label>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">线型</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="radio" name="line" checked> 实线
                                </label>
                                <label class="checkbox-item">
                                    <input type="radio" name="line"> 虚线
                                </label>
                                <label class="checkbox-item">
                                    <input type="radio" name="line"> 点线
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 导出设置配置 -->
                    <div class="tab-content" id="export-tab">
                        <div class="form-group">
                            <label class="form-label">导出格式</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="checkbox" checked> Excel
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> CSV
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> PDF
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> PNG图片
                                </label>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">导出范围</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="radio" name="export-range" checked> 当前视图
                                </label>
                                <label class="checkbox-item">
                                    <input type="radio" name="export-range"> 完整数据
                                </label>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">文件名</label>
                            <input type="text" class="form-input" value="冷端优化报表_20231015">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">包含内容</label>
                            <div class="checkbox-group">
                                <label class="checkbox-item">
                                    <input type="checkbox" checked> 图表
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox" checked> 数据表格
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> 筛选条件
                                </label>
                                <label class="checkbox-item">
                                    <input type="checkbox"> 时间戳
                                </label>
                            </div>
                        </div>
                        
                        <button class="btn btn-primary" style="width: 100%">
                            <i class="fas fa-download"></i> 执行导出
                        </button>
                    </div>
                </div>
                
                <!-- 右侧预览面板 -->
                <div class="preview-panel">
                    <div class="preview-header">
                        <h2 class="preview-title">华北电厂 & 华东电厂 - 背压分析 (2023-10-01 至 2023-10-15)</h2>
                        <div class="export-actions">
                            <button class="export-btn">
                                <i class="fas fa-file-excel"></i> Excel
                            </button>
                            <button class="export-btn">
                                <i class="fas fa-file-csv"></i> CSV
                            </button>
                            <button class="export-btn">
                                <i class="fas fa-file-pdf"></i> PDF
                            </button>
                            <button class="export-btn">
                                <i class="fas fa-print"></i> 打印
                            </button>
                        </div>
                    </div>
                    
                    <div class="preview-content">
                        <div class="chart-container">
                            <canvas id="trendChart"></canvas>
                        </div>
                        
                        <div class="data-table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>华北电厂 #1</th>
                                        <th>华北电厂 #2</th>
                                        <th>华东电厂 #1</th>
                                        <th>华东电厂 #2</th>
                                        <th>平均值</th>
                                        <th>变化率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-10-01</td>
                                        <td>12.5</td>
                                        <td>13.2</td>
                                        <td>14.8</td>
                                        <td>14.2</td>
                                        <td>13.7</td>
                                        <td>+0.5%</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-02</td>
                                        <td>12.4</td>
                                        <td>13.0</td>
                                        <td>14.5</td>
                                        <td>14.0</td>
                                        <td>13.5</td>
                                        <td>-1.5%</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-03</td>
                                        <td>12.6</td>
                                        <td>13.1</td>
                                        <td>14.6</td>
                                        <td>14.1</td>
                                        <td>13.6</td>
                                        <td>+0.7%</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-04</td>
                                        <td>12.3</td>
                                        <td>12.9</td>
                                        <td>14.2</td>
                                        <td>13.8</td>
                                        <td>13.3</td>
                                        <td>-2.2%</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-05</td>
                                        <td>12.7</td>
                                        <td>13.3</td>
                                        <td>14.9</td>
                                        <td>14.3</td>
                                        <td>13.8</td>
                                        <td>+3.8%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 修改密码模态框 -->
    <div class="modal" id="passwordModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">
                    <i class="fas fa-key"></i> 修改密码
                </h3>
            </div>
            
            <div class="modal-body">
                <form id="passwordForm">
                    <div class="form-group">
                        <label for="currentPassword" class="form-label">当前密码</label>
                        <input type="password" id="currentPassword" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="newPassword" class="form-label">新密码</label>
                        <input type="password" id="newPassword" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="confirmPassword" class="form-label">确认新密码</label>
                        <input type="password" id="confirmPassword" class="form-input" required>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button class="btn btn-secondary" id="cancelChangePassword">
                    取消
                </button>
                <button class="btn btn-primary" id="submitChangePassword">
                    保存更改
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 用户头像下拉菜单交互
            const userAvatar = document.getElementById('userAvatar');
            const userDropdown = document.getElementById('userDropdown');
            const passwordModal = document.getElementById('passwordModal');
            const openChangePassword = document.getElementById('openChangePassword');
            const cancelChangePassword = document.getElementById('cancelChangePassword');
            
            // 切换用户下拉菜单
            userAvatar.addEventListener('click', function(e) {
                e.stopPropagation();
                userDropdown.classList.toggle('active');
            });
            
            // 点击其他地方关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!userDropdown.contains(e.target) && e.target !== userAvatar) {
                    userDropdown.classList.remove('active');
                }
            });
            
            // 打开修改密码模态框
            openChangePassword.addEventListener('click', function(e) {
                e.preventDefault();
                userDropdown.classList.remove('active');
                passwordModal.classList.add('active');
            });
            
            // 关闭模态框
            cancelChangePassword.addEventListener('click', function() {
                passwordModal.classList.remove('active');
            });
            
            // 提交密码修改
            document.getElementById('submitChangePassword').addEventListener('click', function() {
                const currentPassword = document.getElementById('currentPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;
                
                if (newPassword !== confirmPassword) {
                    alert('新密码和确认密码不一致！');
                    return;
                }
                
                if (newPassword.length < 6) {
                    alert('密码长度至少为6位！');
                    return;
                }
                
                // 在实际项目中这里会有API调用
                console.log('修改密码:', {
                    currentPassword,
                    newPassword
                });
                
                alert('密码已成功更新！');
                passwordModal.classList.remove('active');
                
                // 清空表单
                document.getElementById('currentPassword').value = '';
                document.getElementById('newPassword').value = '';
                document.getElementById('confirmPassword').value = '';
            });
            
            // 点击模态框背景关闭模态框
            passwordModal.addEventListener('click', function(e) {
                if (e.target === passwordModal) {
                    passwordModal.classList.remove('active');
                }
            });
            
            // 防止模态框内容点击关闭
            document.querySelector('.modal-content').addEventListener('click', function(e) {
                e.stopPropagation();
            });
            
            // 选项卡切换功能
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有活动状态
                    tabs.forEach(t => t.classList.remove('active'));
                    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(`${tabId}-tab`).classList.add('active');
                });
            });
            
            // 初始化图表
            const trendCtx = document.getElementById('trendChart').getContext('2d');
            new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10'],
                    datasets: [
                        {
                            label: '华北电厂 #1',
                            data: [12.5, 12.4, 12.6, 12.3, 12.7, 12.5, 12.4, 12.2, 12.8, 12.6],
                            borderColor: '#5eead4',
                            backgroundColor: 'rgba(94, 234, 212, 0.1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '华北电厂 #2',
                            data: [13.2, 13.0, 13.1, 12.9, 13.3, 13.0, 12.8, 12.7, 13.4, 13.2],
                            borderColor: '#8b5cf6',
                            backgroundColor: 'rgba(139, 92, 246, 0.1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '华东电厂 #1',
                            data: [14.8, 14.5, 14.6, 14.2, 14.9, 14.5, 14.3, 14.0, 15.1, 14.8],
                            borderColor: '#f97316',
                            backgroundColor: 'rgba(249, 115, 22, 0.1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '华东电厂 #2',
                            data: [14.2, 14.0, 14.1, 13.8, 14.3, 14.0, 13.9, 13.6, 14.5, 14.2],
                            borderColor: '#38bdf8',
                            backgroundColor: 'rgba(56, 189, 248, 0.1)',
                            borderWidth: 2,
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: false,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: 'rgba(148, 163, 184, 0.8)'
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: 'rgba(148, 163, 184, 0.8)'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                color: 'rgba(148, 163, 184, 0.8)'
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(30, 41, 59, 0.9)',
                            titleColor: '#e2e8f0',
                            bodyColor: '#94a3b8',
                            borderColor: '#334155',
                            borderWidth: 1
                        }
                    }
                }
            });
            
            // 更新时间显示
            function updateTime() {
                const now = new Date();
                const dateStr = now.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                const timeStr = now.toLocaleTimeString('zh-CN');
                
                document.getElementById('currentTime').textContent = `${dateStr} ${timeStr}`;
            }
            
            // 初始更新时间
            updateTime();
            
            // 每秒更新一次时间
            setInterval(updateTime, 1000);
            
            // 导出按钮功能
            const exportBtns = document.querySelectorAll('.export-btn');
            exportBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const format = this.querySelector('i').className.includes('excel') ? 'Excel' :
                                 this.querySelector('i').className.includes('csv') ? 'CSV' :
                                 this.querySelector('i').className.includes('pdf') ? 'PDF' : '打印';
                    alert(`正在导出 ${format} 格式报表...`);
                });
            });
        });
    </script>
</body>
</html>